<template>
	<view class="index" ref='search'>
		<up-sticky offset-top="200">
			<view class="search-box">
				<view class="logo" @click="switchMode()">
					<text>飞 图</text>
				</view>
				<view class="search">
					<up-search placeholder="搜索图片名称" :showAction="false" disabled inputAlign="center"></up-search>
				</view>
				<view class="share">
					<up-icon name="share-square" color="#A58E78" size="26"></up-icon>
				</view>
			</view>
			{{counter.mode}}
		</up-sticky>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue'
	import { useCounterStore } from '@/stores/counter.js'
	const counter = useCounterStore();
	
	const switchMode = function(){
		const index = document.getElementsByClassName("index");
		console.log(index,"index");
		counter.isMode();
	};
	onMounted(()=>{
		console.log("初始化");
		
	});
	
</script>

<style lang="scss">
	.index {
		padding: 10rpx;
		background-color: var(--bg-color);

		.search-box {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 10rpx;
			
			.logo{
				color: #A58E78;
				font-size: 24px;
				font-family: 'youquti';
				
			}
			
			.search{
				width: 60%;
			}
			
			.share{
				
			}
		}
	}
</style>